<template>
	<view class="status-bar">
		<view class="status-bar-height" :style="height > 0 || important != '' ? 'height:' + height + `px${important}` : ''"></view>
		<view class="status-bar-holder" :style="height > 0 || important != '' ? 'height:' + height + `px${important}` : ''"></view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	const height = ref(0);
	const important = ref('');
	const initHeight = () => {
		let systemInfo = uni.getSystemInfoSync();
		console.log(systemInfo);
		height.value = systemInfo.safeAreaInsets.top;
		//pc版小程序
		if (systemInfo.platform == 'windows') {
			height.value = 0;
			important.value = '!important';
		}
	}
	initHeight();
</script>

<style scoped lang="scss">
	.status-bar-height {
		position: fixed;
		top: 0;left: 0;
		z-index: 20;
		width: 100%;
		height: var(--status-bar-height);
		// background-color: $uni-bg-color;
	}
	.status-bar-holder {
		width: 100%;
		height: var(--status-bar-height);
	}
</style>